<template>
	<view class="i_container">
		<!-- 		<view :style="{ paddingTop: navBarHeight + 'px' }"></view>
		<custom-navbar title="交联·千市通" color="#333333" background="transparent" fontPos="flex-start" :showBack="false" /> -->
		<!-- 轮播图 -->
		<view class="swiper_box" :style="{'background-image': `url(${topBg})`}">
			<view :style="{ paddingTop: navBarHeight + 'px' }"></view>
			<custom-navbar title="交联·千市通" color="#333333" background="transparent"
				:testStyle="{justifyContent:'center','padding':0}" :showBack="false" :ishome="true" />
			<!-- 			<view class="home_title_bottom">
				— 畅行中港澳·泰(1826市) —
			</view> -->
			<up-swiper height="340rpx" :list="list3" indicator indicatorMode="line" circular></up-swiper>
		</view>


		<scroll-view style="height: calc(100vh - 488rpx - 36rpx);padding:26rpx 0 26rpx;box-sizing: border-box;"
			scroll-y="true">
			<!-- 胶囊入口 -->
			<view class="entry_outside">
				<view class="entry">
					<view class="item" v-for="(item, i) in pillList.filter((item,i)=>{return useStore.jugleCode!=10000?true:(i<2)})" :key="i" @click=allEntry(i)>
						<image :src="item.url" alt="" />
						<view class="item_text"> {{ item.text }} </view>
					</view>
				</view>
			</view>

			<!-- 办理区域 -->
			<view class="handleContent_outside" v-if="useStore.jugleCode!=10000">
				<view class="handleContent">
					<view class="handle_right"
						:style="{ backgroundImage: 'url(' + handleContentList[0].imageUrl + ')' }" @click="TipsShow">
						<view class="title">
							{{ handleContentList[0].text}}
						</view>
						<view class="intro">
							{{ handleContentList[0].intro}}
						</view>
						<view class="btn">
							{{ handleContentList[0].btnText}}
						</view>
					</view>
					<view class="handle_left">
						<view class="handle_left_top"
							:style="{ backgroundImage: 'url(' + handleContentList[1].imageUrl + ')' }"
							@click="TipsShow">
							<view class="title">
								{{ handleContentList[1].text}}
							</view>
							<view class="intro" style="margin: 2rpx 24rpx 11rpx;">
								{{ handleContentList[1].intro}}
							</view>
							<view class="btn">
								{{ handleContentList[1].btnText}}
							</view>
						</view>
						<view class="handle_left_bottom"
							:style="{ backgroundImage: 'url(' + handleContentList[2].imageUrl + ')' }"
							@click="TipsShow">
							<view class="title">
								{{ handleContentList[2].text}}
							</view>
							<view class="intro" style="margin: 2rpx 24rpx 11rpx;">
								{{ handleContentList[2].intro}}
							</view>
							<view class="btn">
								{{ handleContentList[2].btnText}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 千市通头条 -->
			<view class="headlines_outside" v-if="useStore.jugleCode!=10000">
				<view class="headlines">
					<view class="title">
						<view class="title_left">
							<image src="https://yxyt.oss-cn-hangzhou.aliyuncs.com/qst/speaker.gif" mode=""></image>
							<view>
								千市通头条
							</view>
						</view>

						<view class="btn" @click="followOfficialAccount">
							关注公众号
						</view>
					</view>
					<view class="content_box_out">
						<view class="content_box_out_scroll" :style="{
						  animationDuration: `${Math.ceil(headlinesList.length/3)*3+5}s`,
						  webkitAnimationDuration: `${Math.ceil(headlinesList.length/3)*3+5}s`
						}">
							<view class="content_box" v-for="(item,index) in [...headlinesList]" :key='index'>
								<view class="content_box_inner">
									<view class="dot"></view>
									<view class="content">
										{{item.text}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 图片 -->
			<view class="pic" @click="TipsShow" v-if="useStore.jugleCode!=10000">
				<!-- <image src="../../static/1_gift_bg.png" alt="" /> -->
				<image src="https://yxyt.oss-cn-hangzhou.aliyuncs.com/qst/under_banner.png" mode=""></image>
			</view>

		</scroll-view>

	</view>
</template>

<script setup>
	import cellGroup from '../../uni_modules/uview-plus/components/u-cell-group/cellGroup';
	import CustomNavbar from '@/components/navbar.vue';
	import {
		ref,
		reactive
	} from "vue";
	import {
		TipsShow
	} from "../../utils/common.js"
	import {
		topBg
	} from '../../utils/base64Img.js';
	import {
		useMyStore
	} from '../../store/index'
	
	const useStore = useMyStore();
	const navBarHeight = ref(getApp().globalData.navBarHeight);
	const pdHight = getApp().globalData.pdHight;
	console.log('navBarHeight', navBarHeight);
	console.log('pdHight底部高度', pdHight);
	const swiperList = ref([{
			url: "A1",
		},
		{
			url: "B2",
		},
		{
			url: "C3",
		},
	]);

	const list3 = ref([
		'https://img2.baidu.com/it/u=4277233136,114066998&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500',
		'https://img2.baidu.com/it/u=2283480606,701471050&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
		'https://img0.baidu.com/it/u=3048952642,3544883969&fm=253&fmt=auto&app=138&f=JPEG?w=662&h=389',
	]);

	const pillList = ref([{
			url: "../../static/1_pill1.png",
			text: "充值",
		},
		{
			url: "../../static/1_pill2.png",
			text: "账单",
		},
		{
			url: "../../static/1_pill3.png",
			text: "互通城市",
		},
		{
			url: "../../static/1_pill4.png",
			text: "使用须知",
		},
		{
			url: "../../static/1_pill5.png",
			text: "在线客服",
		},
	]);

	const handleContentList = ref([{
			text: "权益中心",
			intro: "千市通用户畅享多种权益",
			btnText: '马上了解',
			imageUrl: "https://yxyt.oss-cn-hangzhou.aliyuncs.com/qst/khqy.png",
		},
		{
			text: "千市通联名信用卡",
			intro: "快速办理通道",
			btnText: '立即申请',
			imageUrl: "https://yxyt.oss-cn-hangzhou.aliyuncs.com/qst/xyk.png",
		},
		{
			text: "文创旅游卡系列",
			intro: "景点打卡赢好礼",
			btnText: '立即购卡',
			imageUrl: "https://yxyt.oss-cn-hangzhou.aliyuncs.com/qst/wck.png",
		}
	])


	const headlinesList = [
		{
			text: "马自达计划推出RX-7继任者 ICONIC SP将搭载转子发动机，加多一点内容测试换行效果~~~~~~~",
		},
		{
			text: "优选退出亏损城市，美团跳出内卷",
		},
		{
			text: "万亿数字内容产业，鸿蒙加速度",
		},
		{
			text: "马自达计划推出RX-7继任者 ICONIC SP将搭载转子发动机",
		},
		{
			text: "马自达计划推出RX-7继任者 ICONIC SP将搭载转子发动机",
		},
		{
			text: "优选退出亏损城市，美团跳出内卷",
		},
		{
			text: "万亿数字内容产业，鸿蒙加速度end",
		},
	]

	const background = ref(["color1", "color2", "color3"]);
	const indicatorDots = ref(true);

	const autoplay = ref(true);

	const interval = ref(2000);

	const duration = ref(500);


	const LinkAppId = 'wx2f4eb78ea48ce8ea'

	const allEntry = (i) => {
		switch (i) {
			case 0:
				topupHandle();
				break;
			case 1:
				billHandle();
				break;
			default:
				TipsShow()
		}

	}

	const topupHandle = () => {
		console.log('充值');
		uni.navigateToMiniProgram({
			appId: LinkAppId,
			path: 'pages/recharge/index',
			extraData: {
				'data1': 'test'
			},
			success(res) {
				// 打开成功
			}
		})
	};
	const billHandle = () => {
		console.log('账单');
		uni.navigateToMiniProgram({
			appId: LinkAppId,
			path: 'pages/card-balance/index',
			extraData: {
				'data1': 'test'
			},
			success(res) {
				// 打开成功
			}
		})
	}

	//关注公众号
	const followOfficialAccount = () => {
		TipsShow()
	}


	//1.扫码
	const scanHandler = (e) => {
		// 允许从相机和相册扫码
		uni.scanCode({
			scanType: ["qrCode"],
			success: function(res) {
				console.log("条码类型：" + res.scanType);
				console.log("条码内容：" + res.result);
			},
		});
	};

	//2.拿到扫码结果传给后端
	const getPaymentParmas = (scanCodeResult) => {
		//弹窗
	};

	//3.通过后端接口，拿到签名还有订单号
	const doPayment = async (res) => {
		//1.调用后端接口拿到下面参数nonceStr，package后面的id，signType，paySign
		uni.requestPayment({
			provider: "wxpay",
			timeStamp: String(Date.now()),
			nonceStr: "A1B2C3D4E5",
			package: "prepay_id=" + "wx20180101abcdefg",
			signType: "MD5",
			paySign: "",
			success: function(res) {
				console.log("success:" + JSON.stringify(res));
				//支付后的处理
			},
			fail: function(err) {
				console.log("fail:" + JSON.stringify(err));
			},
		});
	};
	
</script>
<!--  -->
<style scoped lang="scss">
	.i_container {
		// padding-bottom: 28rpx;
		box-sizing: border-box;
		background: #f2f2f2;
		min-height: 100vh;

		// 轮播图
		.swiper_box {
			width: 100%;
			padding: 28rpx 28rpx 0;
			background: transparent;
			box-sizing: border-box;
			// border: 2rpx solid blue;
			border-bottom-right-radius: 36rpx;
			border-bottom-left-radius: 36rpx;
			background-size: 100% 100%;
			// background-image: url("/static/topBg.png");
			background-repeat: no-repeat;
			background-position: center center;
			position: relative;

			.home_title_bottom {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #555555;
				text-align: center;
				position: absolute;
				bottom: 356rpx;
				left: 50%;
				transform: translateX(-50%);
			}

			.uni-margin-wrap {
				// width: 690rpx;
				width: 100%;
				background: #aaa;
				border-radius: 36rpx;
			}

			.swiper {
				height: 444rpx;
				// background: #58c90d;

			}

			.swiper-item {
				display: block;
				height: 413rpx;
				line-height: 413rpx;
				text-align: center;
			}

			.swiper-list {
				margin-top: 40rpx;
				margin-bottom: 0;
			}

			.uni-common-mt {
				margin-top: 60rpx;
				position: relative;
			}

			.info {
				position: absolute;
				right: 20rpx;
			}

			.uni-padding-wrap {
				width: 550rpx;
				padding: 0 100rpx;
			}
		}


		// 胶囊入口
		.entry_outside {
			padding: 0 26rpx;

			.entry {
				font-family: SourceHanSansSC-Medium; //todo

				font-size: 24rpx;
				display: flex;
				padding: 25rpx 54rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 21rpx;
				justify-content: space-between;

				.item {
					// border: 1rpx solid red;
					text-align: center;

					image {
						width: 88rpx;
						height: 88rpx;
						// border-radius: 50%;
					}

					.item_text {
						margin-top: 10rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #555555;
					}
				}
			}

		}

		//办理区域
		.handleContent_outside {
			margin-top: 26rpx;
			padding: 0 28rpx;

			.handleContent {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;


				.handle_right {
					width: 342rpx;
					height: 344rpx;
					background-repeat: no-repeat;
					background-size: contain;
				}

				.handle_left {
					margin-left: 26rpx;
					width: 342rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.handle_left_top {
						width: 100%;
						height: 162rpx;
						// background: url(/static/handle2.png);
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}

					.handle_left_bottom {
						width: 100%;
						height: 162rpx;
						// background: url(/static/handle1.png);
						background-repeat: no-repeat;
						background-size: contain;
					}
				}

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #555555;
					margin: 24rpx 0 15rpx 24rpx;
				}

				.intro {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
					margin: 2rpx 24rpx 26rpx;
				}

				.btn {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 18rpx;
					color: #FFFFFF;
					width: 111rpx;
					height: 32rpx;
					line-height: 32rpx;
					text-align: center;
					background: linear-gradient(155deg, #F89882 0%, #E97676 100%);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-left: 24rpx;
				}
			}

		}



		// 千市通头条
		.headlines_outside {
			padding: 26rpx;

			.headlines {
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				background: #FFFFFF;
				padding: 0 0 20rpx;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #E37145;
					margin-bottom: 28rpx;
					background: #FFEFD7;
					padding: 20rpx 24rpx;
					border-radius: 24rpx 24rpx 0 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title_left {
						display: flex;
						align-items: center;
					}

					.btn {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 20rpx;
						color: #FFFFFF;
						background: linear-gradient(155deg, #FFB176 0%, #E37145 100%);
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						text-align: center;
						padding: 8rpx 15rpx;
					}

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
				}

				.content_box_out {
					// padding: 0 20rpx;
					// box-sizing: border-box;
					height: 160rpx;
					overflow: hidden;
					position: relative; 
					
					.content_box_out_scroll{
						padding: 0 20rpx;
						box-sizing: border-box;
						position: absolute;
						// animation: scrollMove linear infinite;
						animation: scrollMove linear infinite;
						-webkit-animation: scrollMove linear infinite;
						animation-name: scrollMove;
						width: 100%;
						top: 0;
						left: 0;
						will-change: transform;
					}

					.content_box {
						margin-bottom: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #555555;

						.content_box_inner {
							display: flex;
							align-items: flex-start; // 修改为顶部对齐
							word-break: break-word; // 确保长单词换行
							overflow-wrap: break-word; // 兼容性更好的换行属性
						}

						.dot {
							flex-shrink: 0; // 
							width: 12rpx;
							height: 12rpx;
							background: #1EC98F;
							border-radius: 50%;
							// margin: 0 12rpx;
							margin: 10rpx 12rpx 0 0; // 调整对齐方式
						}

						.content {
							flex: 1;
							word-break: break-all; // 强制所有字符换行
							white-space: pre-wrap; // 保留空格但允许换行
							line-height: 1.4; // 调整行高
						}
					}
				}


			}
		}


		// 图片
		.pic {
			height: 300rpx;
			// border: 2rpx solid red;
			border-radius: 21rpx;
			// margin: 52rpx 0 0;
			padding: 0 24rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 21rpx;
			}
		}


	}

	// .box{
	// 	background: transparent;
	// }

	@keyframes scrollMove {
		0% {
			transform: translateY(0%);
		}

		100% {
			transform: translateY(-100%);
		}
	}
</style>